<template>
  <div>
    <Tips />
    <van-checkbox-group v-model="result">
      <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id" @click="chanGoodCheck(item)" :disabled="isEditing">
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          >
          <template #footer>
            <van-stepper v-model="item.number" v-show="isEditing" @change="chanStepNum(item)" />
          </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="delGoods(item)" />
          </template>
        </van-swipe-cell>
      </van-checkbox>
      <!-- <van-checkbox name="b">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-checkbox> -->
    </van-checkbox-group>
    <van-submit-bar :price="cartTotal.checkedGoodsAmount * 100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" :disabled="isEditing || cartList.length == 0">全选</van-checkbox>
      <template #tip>
        累计共{{cartTotal.goodsCount}}件商品，可点击
        <van-button :type="isEditing?'danger':'primary'" size="small" @click="isEditing=!isEditing">{{isEditing?'完成编辑':'编辑'}}</van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from "vue";
import Tips from "@/components/Tips";
import { GetCartAPI, ChanGoodsCheckAPI, ChanStepNumAPI, DelGoodsAPI } from "@/request/api.js";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      result: [],
      // checked: "",
      cartList: [],
      cartTotal: {},
      isEditing:false,
    };
  },
  computed: {
    checked: {
      get() {
        return this.result.length == this.cartList.length && this.cartList != 0;
      },
      set(newVal) {
        if(this.isEditing)return;
        if (this.cartList.length == 0)return;
        // console.log(newVal);
        let ids = this.cartList.map(item => item.product_id);
        ChanGoodsCheckAPI({
          isChecked: newVal ? '1' : '0',
          productIds: ids.join()
        }).then(res =>{ 
          // console.log(res);
          this.renderData(res.data);
        })
      }
    }
  },
  methods: {
    onSubmit() {},
    chanGoodCheck(item) {
      if(this.isEditing)return;
      ChanGoodsCheckAPI({
        isChecked: item.checked ? '0' : '1',
        productIds: item.product_id.toString()
      }).then(res => {
        console.log('点击商品后的res',res);
        this.renderData(res.data);
      })
    },
    chanStepNum(item) {
      console.log(item);
      ChanStepNumAPI({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        console.log(res);
        this.renderData(res.data);
      })
    },
    delGoods(item) {
      DelGoodsAPI({
        productIds: item.product_id.toString()
      }).then(res => {
        console.log(res);
        this.renderData(res.data);
      })
    },
    renderData(data) {
      // 清空result
      this.result = [];
      let {cartList,cartTotal} = data;
      this.cartList = cartList;
      this.cartTotal = cartTotal;
      cartList.map(item => {
        item.checked ? this.result.push(item.id) : '';
      })
    }
  },
  created() {
    GetCartAPI()
      .then((res) => {
        console.log(res);
        
        this.renderData(res.data)

      });
  },
  beforeRouteEnter(to, from, next) {
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      Vue.prototype.$toast("请先登录！");
      setTimeout(() => {
        next("/user");
      }, 500);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  padding: 0 .1rem .1rem;
  background-color: #fff;

  .van-checkbox {
    padding: .1rem 0;
    border-bottom: 1px solid #ccc;
  }
}
/deep/.van-checkbox__label {
  width: 100%;
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button--small {
    margin: 0 0.1rem;
  }
}
.van-card__title {
  font-size: .18rem;
  line-height: .24rem;
  max-height: .5rem;
}
.delete-button {
  height: 100%;
}
</style>